<template>
  <div class="signBox">
    <div class="fromPosition">
      <div class="fromBox">
        <!--登录表单-->
        <div class="from">
          <div class="fromHeader">
            <span
                style="float: right;"
                @click="showFrom = 'translateX(-50%)'"
            >去注册</span>
          </div>
          <div class="fromContent">
            <el-space fill class="fromInput">
              <el-input
                  placeholder="账号"
                  clearable
                  v-model.trim="signIn.account"
              />
              <el-alert
                  title="请输入账号"
                  show-icon type="error"
                  :closable="false"
                  v-if="signIn.account === '' && showError.signIn"
              />

              <el-input
                  placeholder="密码"
                  clearable
                  type="password"
                  v-model.trim="signIn.password"
                  show-password
              />
              <el-alert
                  title="请输入密码"
                  show-icon
                  type="error"
                  :closable="false"
                  v-if="signIn.password === '' && showError.signIn"
              />

              <el-checkbox v-model="signIn.agreement" label="同意用户协议"/>
              <el-alert
                  title="虽然没有拟定用户协议，但形式上还是要的。"
                  show-icon
                  type="error"
                  :closable="false"
                  v-if="!signIn.agreement && showError.signIn"
              />

              <router-link :to="{name: 'GetPassword'}" class="fromLink">密码忘了点这里</router-link>
            </el-space>
            <div class="fromBtn">
              <el-button type="primary" plain @click="submitIn">登录</el-button>
              <el-button type="danger" plain @click="router.back()">取消</el-button>
            </div>
          </div>
        </div>
        <!--注册表单-->
        <div class="from">
          <div class="fromHeader">
            <span @click="showFrom = 'translateX(0)'">去登录</span>
          </div>
          <div class="fromContent">
            <el-space fill class="fromInput">
              <el-input
                  placeholder="账号"
                  clearable
                  v-model.trim="signUp.account"
                  maxlength="10"
                  show-word-limit
              />
              <el-alert
                  title="请设置账号"
                  show-icon
                  type="error"
                  :closable="false"
                  v-if="signUp.account === '' && showError.signUp"
              />

              <el-input
                  placeholder="密码"
                  clearable
                  type="password"
                  v-model.trim="signUp.password"
                  show-password
              />
              <el-alert
                  title="请设置密码"
                  show-icon
                  type="error"
                  :closable="false"
                  v-if="signUp.password === '' && showError.signUp"
              />

              <el-input
                  placeholder="设置一个问题用于找回密码（可选）"
                  clearable
                  v-model.trim="signUp.problem"
              />
              <el-input
                  placeholder="问题答案："
                  clearable
                  v-model.trim="signUp.answer"
              />
              <el-alert
                  title="请设置密码"
                  show-icon
                  type="error"
                  :closable="false"
                  v-if="signUp.problem !== '' && showError.signUp && signUp.answer === ''"
              />

            </el-space>
            <div class="fromBtn">
              <el-button type="primary" plain @click="submitUp">注册</el-button>
              <el-button type="danger" plain @click="router.back()">取消</el-button>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
  import {reactive,ref} from "vue";
  import {useRouter} from "vue-router"
  import {ElMessage} from "element-plus";

  import {http} from "../config/axios/index.js"
  import {useUserStore} from "../config/pinia/user.js"

  //用户状态
  const userStore = useUserStore()

  //路由对象
  const router = useRouter()

  //切换显示表单
  let showFrom = ref("translateX(0)")

  //显示警告语
  const showError = reactive({
    signIn: false,
    signUp: false
  })

  //登录表单数据
  const signIn = reactive({
    account: "",
    password: "",
    agreement: false
  })

  //登录
  async function submitIn(){
    showError.signIn = true
    if(signIn.account === "" || signIn.password === "" || !signIn.agreement){
      return
    }
    let msg = "账号密码不匹配"
    if(await userStore.login(signIn)){
      msg = "登录成功"
      router.back()
    }
    ElMessage({
      showClose: true,
      message: msg,
      center: true,
    })
  }

  //注册表单数据
  const signUp = reactive({
    account: "",
    password: "",
    problem: "",
    answer: ""
  })

  //注册
  async function submitUp(){
    showError.signUp = true
    if(signUp.account === "" || signUp.password === ""){
      return
    }
    if(signUp.problem !== "" && signUp.answer === ""){
      return
    }
    showError.signUp = false
    const res = await http({
      method: "POST",
      url: "user/register",
      data: signUp
    })
    if(res.data.code === 0){
      showFrom.value = "translateX(0)"
      for (let key in signUp) {
        signUp[key] = ""
      }
    }
    ElMessage({
      showClose: true,
      message: res.data.msg,
      center: true,
    })
  }
</script>

<style scoped>
  .signBox{
    width: 100vw;
    height: 100vh;
    background: #0052D4;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #6FB1FC, #4364F7, #0052D4);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #6FB1FC, #4364F7, #0052D4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  }
  .fromPosition{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90vw;
    max-width: 400px;
    height: 70vh;
    border-radius: 10px;
    background-color: var(--el-bg-color);
    overflow: hidden;
  }
  .fromBox{
    width: 200%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    transform: v-bind(showFrom);
    transition: transform .5s;
  }
  .from{
    padding: 15px;
  }
  .from .fromContent{
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .from .fromHeader{
    height: 30px;
  }
  .from .fromHeader span{
    line-height: 30px;
    color: var(--el-text-color-primary);
    font-weight: bold;
    cursor: pointer;
  }
  .from .fromHeader span:hover{
    color: var(--el-color-primary);
  }
  .from .fromInput{
    padding: 10px 0;
  }
  .from .fromLink{
    color: var(--el-text-color-primary);
    text-decoration-color: transparent;
  }
  .from .fromLink:hover{
    color: var(--el-color-primary);
    text-decoration-color: var(--el-color-primary);
  }
  .from .fromBtn{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .from .fromBtn button{
    width: 70%;
    margin: 10px 0;
  }
</style>